<template>
    <nav class="menu-container">
        <RouterLink
            :exact="item.exact"
            v-for="item in items"
            :key="item.link"
            :to="{ name: item.name }"
            active-class="selected"
            exact-active-class=""
        >
            <div class="icon">
                <Icon :type="item.icon"/>
            </div>
            <span>{{ item.title }}</span>
        </RouterLink>
    </nav>
</template>

<script>
import Icon from "@/components/Icon";

export default {
    components: {
        Icon,
    },
    data() {
        return {
            items: [
                {
                    name: "Home",
                    title: "首页",
                    icon: "home",
                    exact: true,
                },
                {
                    name: "Blog",
                    title: "文章",
                    icon: "blog",
                    exact: false, // 激活状态是否要精确匹配
                },
                {
                    name: "About",
                    title: "关于我",
                    icon: "about",
                    exact: true,
                },
                {
                    name: "Project",
                    title: "项目&效果",
                    icon: "code",
                    exact: true,
                },
                {
                    name: "Message",
                    title: "留言板",
                    icon: "chat",
                    exact: true,
                },
            ],
        };
    },
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";

.menu-container {
    color: @gray;
    margin: 24px 0;

    a {
        &.selected {
            background: darken(@words, 3%);
        }

        padding: 0 50px;
        display: block;
        display: flex;
        align-items: center;
        height: 45px;

        .icon {
            width: 24px;
        }

        &:hover {
            color: #fff;
        }
    }
}
</style>
